<script setup lang="ts">
import { computed } from 'vue';
import type { Room } from '@/types/room';
import { useLocale } from '@/locale/locale';
import { convertDateFormat } from '@/utils/date';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();

const props = defineProps<{
  startDate: string;
  endDate: string;
  daysNumber: number;
  items: Room[];
  currencyUnit: string;
}>();

const formattedStartDate = computed(() => {
  return convertDateFormat(props.startDate);
});

const formattedEndDate = computed(() => {
  return convertDateFormat(props.endDate);
});

const formattedCount = computed(() => t('LHKey_night', { number: props.daysNumber }));

defineEmits<{
  open: [
    type: 'DatePicker' | 'GuestNumberPicker' | 'RoomDetails',
    uid?: string,
    id?: string,
    occupancy?: number
  ];
}>();

const currentExchangeRate = (jpy: number) => {
  return jpy * 0.05044;
};
</script>

<template>
  <view class="rooms">
    <view class="flex justify-between items-center px-4">
      <view class="text-xl text-primary font-medium">{{ t('RoomTypeList') }}</view>
      <view class="rooms__head" @click.stop="$emit('open', 'DatePicker')">
        <view class="rooms__date">{{ formattedStartDate }}</view>
        <view class="rooms__count">
          <view class="rooms__count-line"></view>
          <view class="rooms__count-text">{{ formattedCount }}</view>
          <view class="rooms__count-line"></view>
        </view>
        <view class="rooms__date">{{ formattedEndDate }}</view>
      </view>
    </view>
    <view
      v-if="isWechat()"
      class="flex items-center px-4 py-1 bg-amend text-xs"
      style="color: #b84c16"
    >
      人民币结算价仅供参考，以实际支付通道的换算为准。
    </view>
    <view v-else class="divider"></view>
    <view class="rooms__body">
      <view
        v-for="item in items"
        :key="item.id"
        class="rooms__item"
        @click.stop="$emit('open', 'RoomDetails', item.uid, item.id)"
      >
        <image class="rooms__item-cover" :src="item.cover" />
        <view class="rooms__item-meta">
          <view class="mb-1 text-lg text-primary font-medium">{{ item.name }}</view>
          <view class="mb-2 flex items-center text-sm text-primary">
            {{
              t('LHTKey_roomAreaPersonRoom', {
                area: item.size,
                person: item.occupancy,
                room: item.bedrooms
              })
            }}
          </view>
          <view class="flex justify-between">
            <view>
              <view class="flex items-baseline">
                <text class="rooms__item-price-symbol">￥</text>
                <text class="rooms__item-price-amount">{{ item.minPrice }}</text>
                <text class="rooms__item-price-symbol">{{ currencyUnit }}</text>
                <text class="rooms__item-price-tips">{{ t('LHTKey_perNight') }}</text>
                <text class="rooms__item-price-tips">{{ t('LPKey_start') }}</text>
              </view>
              <view v-if="isWechat()" class="text-xs text-fourth">
                参考人民币实时汇率≈¥{{ currentExchangeRate(item.minPrice) }}/晚起
              </view>
            </view>
            <view class="flex flex-col justify-center items-center">
              <view
                class="rooms__item-btn"
                :class="{ 'is-zero': item.inventory === 0 }"
                @click.stop="
                  item.inventory !== 0 &&
                  $emit('open', 'GuestNumberPicker', item.uid, item.id, item.occupancy)
                "
              >
                {{ t('LHTKey_reservation') }}
              </view>
              <view v-if="item.inventory === 0" class="rooms__item-btn-tips is-zero">
                {{ t('LHTKey_noRoom') }}
              </view>
              <view v-else-if="item.inventory < 10" class="rooms__item-btn-tips is-shortage">
                {{ t('LHTKey_onlyRoom', { number: item.inventory }) }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.rooms {
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  background-color: white;

  &__head {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 116rpx;
  }

  &__date {
    font-weight: 500;
    font-size: 32rpx;
    line-height: 44rpx;
    color: #3d3d3d;
  }

  &__count {
    display: flex;
    align-items: center;
    margin: 0 6rpx;

    &-line {
      width: 16rpx;
      height: 2rpx;
      background-color: #0b0706;
    }

    &-text {
      padding: 4rpx 8rpx;
      border: 2rpx solid #3d3d3d;
      border-radius: 16rpx;
      font-size: 24rpx;
      line-height: 1;
      color: #3d3d3d;
    }
  }

  &__body {
    padding: 0 32rpx;
  }

  &__item {
    display: flex;
    padding: 32rpx 0;

    & + & {
      border-top: 2rpx solid #f4f4f4;
    }

    &-cover {
      width: 150rpx;
      height: 150rpx;
      margin-right: 20rpx;
      border-radius: 12rpx;
    }

    &-meta {
      flex: 1;
    }

    &-price-symbol {
      font-size: 24rpx;
      line-height: 36rpx;
      color: #d13820;
    }

    &-price-amount {
      font-size: 36rpx;
      line-height: 36rpx;
      color: #d13820;
    }

    &-price-tips {
      font-size: 24rpx;
      line-height: 36rpx;
      color: #adaeb0;
    }

    &-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 92rpx;
      height: 60rpx;
      background: linear-gradient(360deg, #43bd7e 0%, #269c74 100%);
      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(165, 154, 149, 0.1);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 32rpx;
      line-height: 44rpx;
      color: #fff;
      font-weight: 500;

      &.is-zero {
        background: linear-gradient(360deg, #d6d6d6 0%, #999999 100%);
      }
    }

    &-btn-tips {
      font-size: 24rpx;
      line-height: 34rpx;

      &.is-shortage {
        color: #f69b0c;
      }

      &.is-zero {
        color: #d8d8d8;
      }
    }
  }
}
</style>
